// 区域热力
import * as THREE from "three";

export default class canvasPolygon {
  constructor(e, n) {
    this.earthGroup = n.earthGroup
    this.config = e.configuration.canvasPolygon
    this.data = e.data
    this.showGroup = new THREE.Group()
    this.earthGroup.add(this.showGroup)
    this.width = 8192
    this.height = this.width / 2
    this.canvasDom = null
    this.initMaterial()
    this.showData()
    return this
  }
  initMaterial() {
    if (!this.textureLoader) {
      this.textureLoader = new THREE.TextureLoader
    }
    if (!this.canvasDom) {
      this.canvasDom = document.createElement("canvas")
      this.canvasDom.setAttribute("width", this.width)
      this.canvasDom.setAttribute("height", this.height)
    }
    this.earthMaterial = new THREE.MeshBasicMaterial({
      map: new THREE.Texture(this.canvasDom),
      transparent: true
    })
  }
  showData() {
    this.getData()
    this.earth = new THREE.Mesh(new THREE.SphereBufferGeometry(1001, 128, 128), this.earthMaterial)
    this.showGroup.add(this.earth)
  }
  getData() {
    fetch(window.appConfig.ASSETS_URL + this.config.baseConfig.mapData).then(res => {
      return res.json()
    }).then(t => {
      this.mapData = t
      this.drawCanvas()
    })
  }
  formateDataAction() {
    this.formateData = {}
    this.data.forEach(item => {
      if (item.name && !isNaN(Number(item.value))) {
        this.formateData[item.name] = Number(item.value)
      }
    })
  }
  formateDataConfigAction() {
    this.formateDataConfig = []
    const list = Object.keys(this.config.dataConfig)
    list.map(key => {
      var data = list[key]
      const { min, max, color } = data
      isNaN(min) || isNaN(max) || !color || this.formateDataConfig.push(data)
    })
  }
  getStyleByValue(value) {
    var color = this.config.baseConfig.defaultFill.fillColor;
    if (isNaN(value)) return color;
    for (var a = 0; a < this.formateDataConfig.length; a++) {
      var n = this.formateDataConfig[a];
      if (value >= n.min && value <= n.max) {
        color = n.color;
        break
      }
    }
    return color
  }
  drawCanvas() {
    var e = this;
    this.formateDataAction()
    this.formateDataConfigAction();
    var t = this.config.baseConfig.defaultStroke
    var ctx = this.canvasDom.getContext("2d");
    ctx.clearRect(0, 0, this.width, this.height)
    this.mapData && this.mapData.features.forEach(dataItem => {
      const { geometry: { coordinates, type }, properties: { name } } = dataItem
      ctx.strokeStyle = t.strokeStyle
      ctx.lineWidth = t.lineWidth;
      var l = e.getStyleByValue(e.formateData[name]);
      ctx.fillStyle = l
      if (type === 'MultiPolygon') {
        coordinates.forEach(function (t) {
          t.forEach(function (t) {
            ctx.beginPath()
            t.forEach(t => {
              ctx.lineTo((t[0] + 180) / 360 * e.width, (90 - t[1]) / 180 * e.height)
            })
            ctx.stroke()
          })
        })
      } else if (type === 'Polygon') {
        coordinates.forEach(function (t) {
          ctx.beginPath()
          t.forEach(function (t) {
            ctx.lineTo((t[0] + 180) / 360 * e.width, (90 - t[1]) / 180 * e.height)
          })
          ctx.stroke()
        })
      }

      if (type === 'MultiPolygon') {
        coordinates.forEach(function (t) {
          t.forEach(function (t) {
            ctx.beginPath()
            t.forEach(function (t) {
              ctx.lineTo((t[0] + 180) / 360 * e.width, (90 - t[1]) / 180 * e.height)
            })
            ctx.fill()
          })
        })
      } else if (type === 'Polygon') {
        coordinates.forEach(function (t) {
          ctx.beginPath()
          t.forEach(function (t) {
            ctx.lineTo((t[0] + 180) / 360 * e.width, (90 - t[1]) / 180 * e.height)
          })
          ctx.fill()
        })
      }
    })
    this.earthMaterial.map.needsUpdate = true
    this.earthMaterial.needsUpdate = true
  }
  updateComponent(e) {
    var t = this.config
    var a = t.baseConfig
    var n = t.dataConfig
    var i = this.data;
    this.config = e.configuration.canvasPolygon;
    var r = this.config
    var o = r.baseConfig
    var s = r.dataConfig;
    this.data = e.data
    if (isEqual(a.mapData, o.mapData)) {
      if (isEqual(a.defaultStroke, o.defaultStroke) && isEqual(a.defaultFill, o.defaultFill) && isEqual(n, s) && isEqual(i, this.data)) {

      } else {
        this.drawCanvas()
      }
    } else {
      this.getData()
    }
  }
  destroy() {
    if (this.earthMaterial) {
      this.earthMaterial.dispose()
      this.earthMaterial = null
    }
    if (this.earthMaterial && this.earthMaterial.map) {
      this.earthMaterial.map.dispose()
      this.earthMaterial.map = null
    }
    if (this.earth && this.earth.geometry) {
      this.earth.geometry.dispose()
      this.earth.geometry = null
    }
    this.earth = null
    this.showGroup.remove(this.earth)
    this.earthGroup.remove(this.showGroup)
    this.showGroup = null
    this.config = null
    this.data = null
    this.formateDataConfig = null
    this.formateData = null
    this.width = null
    this.height = null
    this.mapData = null
  }
}